<!--

-->
<template>
    <vxe-modal v-model="visible" :height="layout.modalHeight(600)" :min-width="layout.modalMinWidth(500)" :position="{top: '60px'}" :title="title" :width="layout.modalWidth(500)" destroy-on-close resize show-footer show-maximize @close="cancelClick">
        <el-form ref="ELForm" v-loading="isLoading" :model="state.model" :rules="rules" :validate-on-rule-change="false" class="ELForm" inline label-width="100px">
            <el-form-item :style="layout.col1" label="上级菜单" prop="pid">
                <el-tree-select v-model="state.model.pid" :check-strictly="true" :data="state.tree" :props="{label: 'name', children: 'children'}" :render-after-expand="false" style="width: 100%" value-key="id" />
            </el-form-item>
            <el-form-item :style="layout.col1" label="名称" prop="name">
                <el-input v-model="state.model.name" />
            </el-form-item>
            <el-form-item :style="layout.col1" label="编号" prop="code">
                <el-input v-model="state.model.code" />
            </el-form-item>
            <el-form-item :style="layout.col1" label="是否启用" prop="visible">
                <el-radio-group v-model="state.model.visible">
                    <el-radio :value="true">启用</el-radio>
                    <el-radio :value="false">禁用</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item :style="layout.col1" label="图标" prop="icon">
                <el-input v-model="state.model.icon" />
            </el-form-item>
            <el-form-item :style="layout.col1" label="排序" prop="sort">
                <el-input-number v-model="state.model.sort" :min="0" controls-position="right" style="width: 100%" />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="cancelClick">取消</el-button>
            <el-button :loading="isSubmitting" type="primary" @click="beforeSubmit">
                确定
            </el-button>
        </template>
    </vxe-modal>
</template>

<script setup>
import {ref, reactive, computed, watch, onMounted} from "vue";
import {FormMixins} from "@/utils/FormMixins";
import * as api from "../api.js";

const {ELForm, visible, title, layout, isLoading, isSubmitting, state, setOptions, submitSuccess, cancelClick} = FormMixins();
const {$message} = window;

const Model = () => {
    return {
        id: null,
        name: null,
        code: null,
        type: 0,
        openType: null,
        visible: true,
        icon: null,
        sort: 0,
        router: null,
        link: null,
        permission: null,
        pid: null
    }
}

// 校验规则
const rules = computed(() => {
    return {
        name: [{required: true, message: "请输入名称"}],
        code: [{required: true, message: "请输入编号"}],
        pid: [{required: state.model.pid, validator: customRules.pid}],
    }
})

// 自定义校验规则
const customRules = {
    pid: (rule, value, callback) => {
        if (value > 0) {
            // 校验防止死循环
            if (state.model.id === value) {
                return callback(new Error("上级目录不能是当前目录"));
            }
            // 校验所选上级菜单必须是没有 pid 的目录(一级目录)
            const parent = state.tree.treeFind(item => item.id === value);
            if (parent.type !== 0 || parent.pid > 0) {
                return callback(new Error("上级目录必须是一级目录"));
            }
        }
        return true;
    },
};

// 表单显示
async function show(config) {
    setOptions(config);
    state.model = Model();
    state.model = {...state.model, ...state.options}
    state.parent = null
    api.GetMenuTreeList().then(({success, data}) => {
        state.tree = data;
    });
}

// 校验表单
function beforeSubmit() {
    ELForm.value.validate(isOk => {
        isOk && submit()
    })
}

// 提交表单
async function submit() {
    isSubmitting.value = true
    // console.log("submit: ", state.model)
    const body = {...state.model}
    const {success, data} = await api[state.model.id ? 'UpdateMenuInfo' : 'AddMenuInfo'](body);
    isSubmitting.value = false
    if (!success) return 0;
    $message.success("操作成功")
    submitSuccess()
}

onMounted(() => {
})
defineExpose({
    show
})
</script>

<style lang="scss" scoped>
.menu-name {
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    color: var(--el-color-primary);
    font-size: 14px;
}
</style>
